@charset "utf-8";

/* CSS Document */
/******************************
** 文件描述 :  浙江政务服务 风格UI
** 时    间 ： 2017.11
*******************************/

// Less 变量定义
// 颜色定义
@color-bg:      #f3f3f3; //背景色，灰色
@color-border:  #e7e7e7; //边框色，灰色
@color-ddd:     #dddddd; //底部导航分割线，重要区域分隔线
@color-sub:     #ffa007; //辅助色，橙黄
@color-sub2:    #fe3116; //辅助色，橘红
@color-000:     #000000; //文本色，黑色，重量级文字，标题
@color-333:     #333333; //辅助文本色，正文或辅助文字
@color-666:     #666666; //辅助文本色，辅助文字
@color-999:     #999999; //辅助文本色，时间
@color-hover:   #1492ff; //选中色，蓝色，强调突出
@color-fff:     #ffffff; //选中文本色，白色

//字体定义
@yahei: 'Helvetica Neue','Microsoft YaHei';

//图片路径
@img: '../images/';

// Bootstrap 2.3.1 重置
.container{
    width: 1000px;
    font-family: @yahei;

    //标题正文
    h1{
        color: @color-666;
        font-size: 24px;
    }
    h2{
        color: @color-666;
        font-size: 22px;
    }
    h3{
        color: @color-666;
        font-size: 18px;
    }
    p{
        color: @color-666;
        font-size: 14px;
        line-height: 1.5;
    }
    a{
        color: @color-hover;
        font-size: 14px;
    }

    //栅格
    .span1{
        width: 65px; //60px;
    }
    .span2{
        width: 150px; //140px;
    }
    .span3{
        width: 235px; //220px;
    }
    .span4{
        width: 320px; //300px;
    }
    .span5{
        width: 405px; //380px;
    }
    .span6{
        width: 490px; //460px;
    }
    .span7{
        width: 575px; //540px;
    }
    .span8{
        width: 660px; //620px;
    }
    .span9{
        width: 745px; //700px;
    }
    .span10{
        width: 830px; //780px;
    }
    .span11{
        width: 915px; //860px;
    }
    .span12{
        width: 1000px; //940px;
    }

    //表格
    table{
        width: 100%;
        margin-bottom: 30px;
        border: 1px solid @color-border;
        th,td{
            padding: 8px 10px;
            border: 1px solid @color-border;
            color: @color-333;
            font-size: 14px;
        }
        thead{
            tr{

            }
            th{
                text-align: center;
            }
        }
        tbody{
            tr{
                &:hover{
                    background: #fbf9f9;
                }
            }
            td{
                word-break: break-all;
                a,.link{
                    margin: 0 5px;
                    text-decoration: underline;
                    cursor: pointer;
                }
                .file{
                    text-decoration: none;
                    &:after{
                        content: '';
                        display: inline-block;
                        width: 0;
                        height: 0;
                        margin-left: 5px;
                        border-top: 5px solid @color-hover;
                        border-left: 5px solid transparent;
                        border-right: 5px solid transparent;
                        font-size: 0;
                    }
                }
                .x1,.x2,.x3{
                    margin-right: 3px;
                    vertical-align: -2px;
                }
            }
        }
        &.table-center{
            text-align: center;
        }
    }

    //按钮
    .btn{
        display: inline;
        padding: 6px 13px;
        background: @color-hover;
        border: 1px solid @color-hover;
        border-radius: 3px;
        box-shadow: none;
        text-shadow: none;
        color: #fff;
        font-size: 14px;
        text-decoration: none;
        &:hover{
            background: #1874cd;
            border: 1px solid #1874cd;
            color: #fff;
            text-decoration: none;
        }
        &:active{
            background: #0b5dac;
            border: 1px solid #0b5dac;
            color: #fff;
        }
        &[disabled]{
            background: #f2f2f2;
            border: 1px solid #f2f2f2;
            color: #b4b4b4;
            cursor: default;
        }
        &.btn-assist{
            background: #fafafa;
            border: 1px solid #ccc;
            color: @color-666;
            &:hover{
                background: #fff;
                border: 1px solid #1492ff;
                color: #1492ff;
            }
            &:active{
                background: #fff;
                border: 1px solid #e4e4e4;
                color: #444;
            }
            &[disabled]{
                background: #f2f2f2;
                border: 1px solid #f2f2f2;
                color: #b4b4b4;
                cursor: default;
            }
        }
        &.btn-big{
            padding: 18px;
        }
        &.btn-small{
            padding: 7px 11px;
            font-size: 13px;
        }
    }
}

// 头部 Header
.zjzw-header{
    height: 80px; line-height: 80px;
    margin-bottom: 20px;
    background: #fff;
    a{
        text-decoration: none;
        &:hover{
            text-decoration: none;
        }
    }
    .zjzw-header-name{
        display: inline-block;
        height: 40px;
        margin-left: 15px;
        padding-left: 20px;
        border-left: 1px solid @color-border;
        color: @color-666;
        font-size: 24px;
        line-height:40px;
        vertical-align: -6px;
    }
}

// 尾部 Footer
.zjzw-footer{
    margin-top: 45px;
    padding-top: 35px;
    padding-bottom: 40px;
    background: #efefef;
    p{
        margin-bottom: 0;
        color: @color-666;
        text-align: center;
        a{
            color: @color-666;
        }
    }
    .hotline{
        margin-bottom: 6px;
        color: @color-hover;
        font-size: 18px;
    }
    .copyright{
        position: relative;
        p{
            line-height: 30px;
        }
        .icon-dzjg{
            position: absolute; top: 15px; right: 0px;
            width: 50px; height: 62px;
            background: none;
        }
    }
}

// 内容 Body
body{
    background: #f7f7f7;
}
.zjzw-body{
    position: relative;
    margin-top: 30px;
    background: #fff;

    .redtip{
        color: #fe4732;
        font-style: normal;
    }
    .x1,.x2,.x3{
        display: inline-block;
        width: 16px; height: 15px;
    }
    .x1{
        background: url("@{img}x1.png") no-repeat;
    }
    .x2{
        background: url("@{img}x2.png") no-repeat;
    }
    .x3{
        background: url("@{img}x3.png") no-repeat;
    }
    .zjzwfw-banner{
        position: absolute; top: 0; left: 0;
        width: 1000px;
    }
    .panel-title{
        margin-top: 190px;
        margin-bottom: 40px;
        padding-left: 20px;
        padding-right: 20px;
        height: 50px; line-height: 50px;
        .panel-title-icon{
            float: left;
        }
        .panel-title-text{
            position: relative;
            height: 48px;
            margin-left: 65px;
            border-bottom: 2px solid @color-hover;
            .panel-title-name{
                color: @color-333;
                font-size: 24px;
                font-weight: normal;
            }
            .panel-title-code{
                position: absolute; top: 0px; right: 0px;
                color: @color-333;
                font-size: 14px;
            }
        }
    }
    .panel-operate{
        margin-top: -10px;
        padding-left: 20px;
        .panel-operate-title{
            margin-top: 0;
            margin-bottom: 15px;
            color: @color-333;
            font-size: 24px;
            .icon-separate{
                display: inline-block;
                width: 3px; height: 24px;
                margin-right: 7px;
                background: @color-333;
                vertical-align: middle;
            }
            span{
                vertical-align: middle;
            }
        }
        .panel-flow{
            .panel-flow-item{
                display: block;
                width: 110px; height: 110px;
                margin-bottom: 20px;
                cursor: pointer;
                span{
                    display: block;
                    width: 110px;
                    padding-top: 80px;
                    color: #fff;
                    font-size: 18px;
                    text-align: center;
                }
                &.panel-flow-item1,&.panel-flow-item1-default{
                    background: url("@{img}lc_icon_a3.png") no-repeat;
                }
                &.panel-flow-item1-success{
                    background: url("@{img}lc_icon_a2.png") no-repeat;
                }
                &.panel-flow-item1-error{
                    background: url("@{img}lc_icon_a1.png") no-repeat;
                }
                &.panel-flow-item2,&.panel-flow-item2-default{
                    background: url("@{img}lc_icon_b3.png") no-repeat;
                }
                &.panel-flow-item2-success{
                    background: url("@{img}lc_icon_b2.png") no-repeat;
                }
                &.panel-flow-item2-error{
                    background: url("@{img}lc_icon_b1.png") no-repeat;
                }
                &.panel-flow-item3,&.panel-flow-item3-default{
                    background: url("@{img}lc_icon_c3.png") no-repeat;
                }
                &.panel-flow-item3-success{
                    background: url("@{img}lc_icon_c2.png") no-repeat;
                }
                &.panel-flow-item3-error{
                    background: url("@{img}lc_icon_c1.png") no-repeat;
                }
                &.panel-flow-item1-default,&.panel-flow-item2-default,&.panel-flow-item3-default{
                    span{
                        color: @color-666;
                    }
                }
            }
        }
    }
    .border-left{
        border-left: 1px solid @color-border;
        box-sizing: border-box;
    }
    .panel-operate-tip{
        position: relative;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 30px;
        padding: 15px 20px;
        color: #fe3116;
        background: #ffedc3;
        .tip-close{
            position: absolute; top: 0; right: 0px;
            width: 30px; height: 30px;
            background: url("@{img}icon_close.png") no-repeat center center;
            cursor: pointer;
        }
        p{
            margin-bottom: 0;
            padding-left: 43px;
            text-indent: -43px;
            color: #fe3116;
            font-size: 14px;
            line-height: 28px;
            .x1,.x2,.x3{
                vertical-align: -2px;
            }
        }
    }
    .panel-operate-wrap{
        padding-bottom: 60px;
        padding-left: 20px;
        padding-right: 20px;
        .panel-flow-body{
            min-height: 440px;
        }
        .panel-flow-title{
            margin-bottom: 10px;
            color: @color-hover;
            font-size: 18px;
            .icon{
                margin-right: 7px;
                vertical-align: -2px;
            }
        }
        .panel-flow-con{
            margin-bottom: 30px;
        }
    }
    .panel-btns{
        margin-top: 60px;
        text-align: center;
        .btn{
            margin: 0 20px;
        }
    }
}
